<script>
import { getAddTemplate, getAddList, add } from './api'
import { dateFormat } from '@/utils/index'
const initForm = {
  name: '', // 线索名称
  phone: '', //  手机号码
  // leadsStatus: 0, //  线索状态(0待分配，1跟进中，2已上门，3已退回)
  sex: '1', // 性别 0 = 未知, 1 = 男, 2 = 女
  propertiesList: [
    // 自定义属性
    // {
    //   id: 0, // 线索模板表Id
    //   key: 'string', // 表项名称
    //   keyEn: 'string', // 表项Id
    //   value: 'string', // 值
    //   name: 'string', //  表项名称
    // },
  ],
}
export default {
  name: '',
  components: {},
  data() {
    return {
      getAddList,
      show: false,
      form: JSON.parse(JSON.stringify(initForm)),
      templateList: undefined,
      columns: [],
      currentEditObj: {},
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    // 获取自定义模板字段列表
    async getAddTemplate() {
      this.templateList || (this.templateList = (await getAddTemplate()).data)
      this.form.propertiesList = JSON.parse(JSON.stringify(this.templateList))
      this.show = true
    },

    setSelectOpen(row) {
      this.currentEditObj = row
      if (row.dataAttr == 2) {
        // this.currentEditObj.value = dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss')
        this.currentEditObj._valueDatetime = new Date(this.currentEditObj.value || new Date())
      }

      this.$set(this.currentEditObj, 'show', true)
      // this.currentEditObj.show = true
    },
    datetimeConfirm(val) {
      this.currentEditObj.value = dateFormat(val, 'yyyy/MM/dd hh:mm:ss')
      this.currentEditObj.show = false
    },
    selectChange(v) {
      this.currentEditObj.value = v.content
      this.currentEditObj.show = false
    },

    cancel() {
      this.show = false
    },
    // 提交
    onSubmit() {
      let form = JSON.parse(JSON.stringify(this.form))
      form.propertiesList = form.propertiesList.map((e) => ({
        id: e.id,
        key: e.tableEntryName,
        name: e.tableEntryName,
        keyEn: e.tableEntryId,
        value: e.value,
      }))

      const toast = this.$toast.loading()
      add(form)
        .then((data) => {
          this.$toast.success('操作成功')
          this.$refs.list.getList()
          this.cancel()
          this.form = JSON.parse(JSON.stringify(initForm))
        })
        .catch((err) => {
          console.log(err)
        })
        .finally(() => {
          toast.clear()
        })
    },
  },
}
</script>

<template>
  <div class="list">
    <van-button round type="primary" size="small" class="mb10" @click="getAddTemplate">新增线索</van-button>

    <PullRefreshScrollLoadList ref="list" :request="getAddList">
      <template v-slot="list">
        <div
          class="list-item"
          v-for="(item, index) in list"
          :key="index"
          @click="$router.push({ name: 'clueDetail', query: { id: item.id } })"
        >
          <div class="list-title">{{ item.name }}</div>
          <div class="list-info">
            {{ item.phone }}
          </div>
        </div>
      </template>
    </PullRefreshScrollLoadList>

    <!-- 新增线索 -->
    <van-action-sheet v-model="show" title="新增线索">
      <!-- 表单 -->
      <van-form @submit="onSubmit">
        <van-field
          v-model="form.name"
          label="姓名"
          placeholder="请输入姓名"
          required
          :rules="[{ required: true, message: '' }]"
        />

        <van-field
          v-model="form.phone"
          required
          :rules="[{ required: true, message: '' }]"
          label="联系方式"
          placeholder="请输入联系方式"
          type="tel"
          maxlength="11"
          show-word-limit
        />

        <van-field name="radio" label="性别">
          <template #input>
            <van-radio-group v-model="form.sex" direction="horizontal">
              <van-radio name="1">男</van-radio>
              <van-radio name="2">女</van-radio>
              <van-radio name="0">未知</van-radio>
              <!-- <van-radio v-for="(item, index) in stageList" :name="item.stageVal" :key="index">
                {{ item.stageKey }}
              </van-radio> -->
            </van-radio-group>
          </template>
        </van-field>

        <!-- <van-field
          v-model="form."
          label="出生日期"
          placeholder="请输入出生日期"
          required
          :rules="[{ required: true, message: '' }]"
        /> -->

        <!-- 自定义模板字段 -->
        <template v-for="(item, key) in form.propertiesList">
          <!--
              tableEntryAttr 表项属性 0 填写项 1 下拉项
              dataAttr 数据属性 0 文本 1 数字 2 日期
            -->
          <van-field
            v-if="item.tableEntryAttr == 1 || item.dataAttr == 2"
            v-model="item.value"
            readonly
            :name="item.labelName"
            :label="item.tableEntryName"
            placeholder="请选择"
            :required="item.required == 1"
            :rules="[{ required: item.required == 1, message: '' }]"
            @click="setSelectOpen(item)"
          />
          <van-field
            v-else-if="item.tableEntryAttr == 0"
            v-model="item.value"
            :type="item.dataAttr == 1 ? 'number' : 'text'"
            :name="item.tableEntryName"
            :label="item.tableEntryName"
            placeholder="请输入"
            :maxlength="item.maxInputLen"
            show-word-limit
            :required="item.required == 1"
            :rules="[{ required: item.required == 1, message: '' }]"
          />
        </template>

        <van-popup v-model="currentEditObj.show" round position="bottom" :close-on-click-overlay="false">
          <!-- 日期选项 datetimeType 日期类型 0 日期 1 日期+时间 -->
          <van-datetime-picker
            v-if="currentEditObj.dataAttr == 2"
            v-model="currentEditObj._valueDatetime"
            :type="currentEditObj.datetimeType == 1 ? 'datetime' : 'date'"
            title="选择时间"
            @confirm="datetimeConfirm"
            @cancel="currentEditObj.show = false"
          />

          <!-- 下拉项 -->
          <van-picker
            v-else-if="currentEditObj.tableEntryAttr == 1"
            value-key="content"
            show-toolbar
            :columns="currentEditObj.tableEntryContent || []"
            @cancel="currentEditObj.show = false"
            @confirm="selectChange"
          />
        </van-popup>

        <div class="flex" style="margin: 20px;">
          <van-button class="" round block plain native-type="button" @click="cancel">取消</van-button>
          <van-button class="ml10" round block type="info" native-type="submit">提交</van-button>
        </div>
      </van-form>
    </van-action-sheet>
  </div>
</template>

<style lang="less" scoped>
.list {
  padding: 10px;
  overflow: auto;
  background: #eee;
  .list-item {
    padding: 10px 15px;
    background: #fff;
    border-radius: 8px;
    & + .list-item {
      margin-top: 10px;
    }
    .list-title {
      font-weight: 500;
      font-size: 16px;
    }
    .list-info {
      // color: #b5b8c0;
      margin: 10px 0 0;
    }
    // .list-time {
    //   color: #b5b8c0;
    //   font-size: 12px;
    // }
  }
}
</style>
